<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>服务中心</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
	<meta content="yes" name="apple-mobile-web-app-capable">     
	<meta content="black" name="apple-mobile-web-app-status-bar-style">     
	<meta content="telephone=no" name="format-detection">
	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="stylesheet" href="/H5/css/sm.min.css">
	<link rel="stylesheet" href="/H5/css/reset.css">
	<link rel="stylesheet" href="/H5/css/order.css">
	<link rel="stylesheet" href="/H5/css/balance.css">
</head>    
<body>
		<div class="page-group ms-controller" :controller="friendList">
	        <div class="page page-current">
	            <header class="bar bar-nav">
	              	<a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
	              	<a class="icon icon-home pull-right" href="/H5"></a>
	              	<h1 class="title">服务中心</h1>
	            </header>
	            <div style="margin-bottom: 0;top: 2.5rem; position: absolute; width: 100%; z-index: 999999">
	                <div class="buttons-tab">
	                    <a :on-click="@typeChoose(2)" :class="@type==2?'tab-link active button':'tab-link button'">邀请的代付</a>
	                    <a :on-click="@typeChoose(1)" :class="@type==1?'tab-link active button':'tab-link button'">收到的代付</a>
	                    <a :on-click="@typeChoose(3)" :class="@type==3?'tab-link active button':'tab-link button'">代付佣金明细</a>
	                </div>
	                <div :visible="@type!=3" class="buttons-tab" style="font-size: .5rem">
	                    <a :on-click="@jump(0)" :class="@status==0?'tab-link button active':'tab-link button'" style="font-size:.75rem;height: 1.6rem;line-height:1.6rem">待处理</a>
	                    <a :on-click="@jump(1)" :class="@status==1?'tab-link button active':'tab-link button'" style="font-size:.75rem;height: 1.6rem;line-height:1.6rem">已支付</a>
	                    <a :on-click="@jump(2)" :class="@status==2?'tab-link button active':'tab-link button'" style="font-size:.75rem;height: 1.6rem;line-height:1.6rem">已驳回</a>
	                </div>
	            </div>  
	            <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100" :css="{'top': @type==3?'5rem':'6rem', 'padding-top': @type==3?'50px':'0'}">
    				<div :visible="@type!=3" class="card card_first" :for="el in @friendList">
    	                <div class="card-header">
    	                	<a><span class="order_span" >{{@type==2?"邀请"+"'"+el.friend_name+"'":"来自"+"'"+el.order_owner+"'"}}的代付订单￥{{(el.pay_money-0)+(el.friend_fee_money-0)}}元</span><a href="javascript:;" :visible="@type==2&&@status==0" :on-click="@delete(el.order_no)" style="display:block; width:20%; float:right; text-align:center; font-size: .8rem">取消订单</a></a>
    	                </div>
    	                <div class="card-content" :on-click="@to(el.order_no)">
    						<div class="card-content-inner">
    	                    	<a><img :attr="{'src':@el.goods.picture_urls[0]}"/></a>
    	                        <div class="order_right">
    	                        	<p>{{el.goods.title}}</p>
    	                            <h5>{{el.goods.intro||""}}</h5>
    	                            <div style="color: red"><span style="color: black">代付收益：</span>￥{{el.friend_fee_money||0}}</div>
    	                            <div style="color: red"><span style="color: black">实际支付：</span>￥{{el.pay_money||0}}</div>
    	                        </div>
    	                        <div style="padding: .5rem .75rem;">订单号：{{el.order_no}}</div>
    	                    </div>
    	                </div>
    					<div :visible="@type==1&&@status==0" class="card-footer" style="-webkit-justify-content: flex-end;justify-content: flex-end; ">
    						<a :on-click="@bh(el.order_no)" style="color: #999; margin-right: 2%;border: 1px solid #999" href="javascript:;" >驳回</a>
    						<a href="javascript:;" :on-click="@fPay(el.order_no)" >确认付款</a>
    					</div>
    					<div :visible="@status==1" class="card-footer">已支付</div>
    					<div :visible="@status==2" class="card-footer">驳回原因：{{el.reason}}</div>
    				</div>
					<div :visible="@type==3" style="position: fixed; width: 100%; top: 4.5rem; background-color: #eee; height: 50px; line-height: 50px;">
		            	<div style="font-size: .8rem; margin-right: 2%; float: right">总额:<span style="margin-left: .2em;color: #f00">￥{{@data.total_commission||0}}</div>
		            </div>
		            <div :visible="@type==3" class="integral_balance_first" :for="el in @list">
		            	<div>
		                	<span style="font-size: .8rem">{{el.title}}</span>
		                </div>
		                <div>
		                    <span class="balance_first" style="font-size: 1rem; color: #0c0;">+{{el.money}}</span>
		                    <span class="balance_gray" style="float: left;">{{el.create_time}}</span>
		                </div>
		            </div>
	                <div :if="@more" class="infinite-scroll-preloader">
		                <div class="preloader"></div>
		            </div>
	            </div>
	        </div>
	    </div>
	<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/mall.js' charset='utf-8'></script>
    <script>
		var friendList = avalon.define({
		    $id: "friendList",
		    loading: false,
		    type: Mall.parseUrl( window.location.href ).type||1,
		    status: Mall.parseUrl( window.location.href ).status||0,
		    more: false,
		    list: [],
		    data: {},
		    page_num: 1,
		    page_size: 10,
		    friendList:[],
		    getFriendList: function( o ){
		    	var url;
		    	if( friendList.type == 1 ){
		    		url = "/api/OrderInviteMeList";
		    	}
		    	else{
		    		url = "/api/OrderMeInviteList";
		    	}
	        	var postData = {
		        	page_num: friendList.page_num,
		        	page_size: friendList.page_size,
		        	friend_status: friendList.status
		        };
			    if( friendList.loading ){
			    	return
			    }
		        friendList.loading = true;
		        Mall.request( url, postData )
		        	.always( function( data ){
		        		if( data.error_code == 0 ){
	        				if( friendList.page_num == data.data.page_total ){
	        					friendList.more = false;
	        				}
	        				else{
	        					if( data.data.list.length == 0 ){
	        						friendList.more = false;
	        					}
	        					else{
	        						friendList.more = true;
	        					}
	        				}
        					if( o ){
        				    	friendList.friendList = friendList.friendList.concat( data.data.list );
        					}
        					else{
        						friendList.friendList = data.data.list;
        					}
        					friendList.page_num ++;
		        		}
		        		else{
		        		    $.alert(data.error_msg);
		        		}
		        		friendList.loading = false;
		        	} )
		    },
    		getCommission: function( t ){
                if( friendList.loading ){
                    return
                }
                friendList.loading = true;
    			Mall.request( "/api/CommissionList", {page_num: friendList.page_num, page_size: friendList.page_size, type: 0} )
    				.always( function( data ){
                        if( data.error_code == 0 ){
                            friendList.data = data.data;
                            friendList.list = friendList.list.concat( data.data.list );
                            if( friendList.page_num == data.data.page_total ){
                                friendList.more = false;
                            }
                            else{
                                if( data.data.list.length == 0 ){
                                    friendList.more = false;
                                }
                                else{
                                    friendList.more = true;
                                }
                            }
                            friendList.page_num ++;
                        }
                        else{
                            $.alert(data.error_msg);
                        }
                        friendList.loading = false;
    				} )
    			$( ".content" ).removeClass( "visibility" )
    		},
		    typeChoose: function( t ){
	            var url = window.location.href.split( "?type=" )[0]+"?type="+t;
	            friendList.type = t;
	            friendList.page_num = 1;
	            friendList.status = 0;
	            friendList.friendList = [];
	            friendList.list = [];
				window.history.replaceState(null, null, url);
				if( t == 3 ){
					friendList.getCommission();
				}
				else{
					friendList.getFriendList();
				}
		    },
		    to: function(id){
		    	window.location.href = '/H5/orderdetial?orderId='+id;
		    },
		    jump: function(status){
		        if( typeof status === "undefined" ){
		            return
		        }
		        friendList.friendList = [];
		        var url = window.location.href.split( "&status=" )[0]+"&status="+status;
		        friendList.page_num = 1;
		        friendList.status = status;
		        window.history.replaceState(null, null, url);
		        friendList.getFriendList();
		    },
		    fPay: function( id ){
		    	window.location.href = "/H5/pay?orderId="+id;
		    },
		    delete: function( id ){
		    	$.confirm("确定要取消订单吗?", function(){
		    		Mall.request( "/api/OrderRemove", {order_no: id} )
		    			.always( function( data ){
		    				if( data.error_code == 0 ){
		    				    $.toast( "取消成功", 1000, "success", function(){
		    				        window.location.reload();
		    				    } )
		    				}
		    				else{
		    				    $.alert(data.error_msg);
		    				}
		    			} )
		    	})
		    },
		    bh: function( id ){
		    	$.prompt("请输入驳回理由", function( value ){
		    		var postData = {
		    			order_no: id,
		    			reason: value
		    		}
		    		Mall.request( "/api/OrderInviteReject", postData )
		    			.always( function( data ){
		    				if( data.error_code == 0 ){
		    					$.toast( "驳回成功", 1000, "success", function(){
		    						window.location.href = "/H5/friendlist?type=1&status=2"
		    					} )
		    				}
		    				else{
		    					$.alert(data.error_msg);
		    				}
		    			} )
		    	})
		    },
		    infinite: function(){
		    	$(document).on('infinite', '.infinite-scroll-bottom',function() {
		    		if( friendList.more ){
		    			if( friendList.type == 3 ){
		    				friendList.getCommission( true );
		    			}
		    			else{
		    				friendList.getFriendList( true );
		    			}
		    		}
		    	});
		    	$.init();
		    }
		})
		if( friendList.type == 3 ){
			friendList.getCommission();
		}
		else{
			friendList.getFriendList();
		}
		friendList.infinite();
		avalon.scan( document.body );
    </script>
</body>
</html>
